<template>
  <div class="form-table">
    <el-form
      ref="ruleFormRef"
      style="margin-top: 20px"
      label-position="top"
      label-width="80px"
      size="small"
      :model="formData"
      :disabled="disabled"
    >
      <el-table
        style="width: 100%"
        :data="formData.tableData"
        :loading="loading"
        fit
        border
        stripe
      >
        <template v-for="(item, index) in getTableModel">
          <el-table-column
            v-if="item.type"
            :key="item.prop || index"
            :type="item.type"
            :fixed="item.fixed"
            :label="item.slashLabel || item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align || 'center'"
            :show-overflow-tooltip="!item.hideOver"
          >
          </el-table-column>
          <el-table-column
            v-else
            :key="item.prop || index"
            :type="item.type"
            :fixed="item.fixed"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align"
            show-overflow-tooltip
          >
            <template v-if="item.require" slot="header">
              <span class="star">*</span>
              <span class="starName">{{ item.label }}</span>
            </template>
            <template slot-scope="scope">
              <template v-if="item.slot == 'text'">
                <span>{{ scope.row[item.prop] }}</span>
              </template>
              <template v-else-if="item.slot == 'operate'">
                <el-button-group class="operation-button-group">
                  <el-button
                    size="mini"
                    type="text"
                    class="operation-button"
                    @click.stop="saveItem(scope)"
                  >
                    <span>保存</span>
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    class="operation-button"
                    @click.stop="deleteItem(scope)"
                  >
                    <span>删除</span>
                  </el-button>
                </el-button-group>
              </template>
              <template v-else-if="item.slot">
                <slot
                  :name="item.slot"
                  :row="scope.row"
                  :value="scope.row[item.prop]"
                  :index="scope.$index"
                  :scope="scope"
                />
              </template>
              <template v-else>
                <el-form-item
                  :prop="'tableData.' + scope.$index + '.' + item.prop"
                  :rules="item.rules"
                >
                  <el-date-picker
                    v-if="item.date"
                    style="width: 100%"
                    v-model="scope.row[item.prop]"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :readonly="formData.disabledArr.includes(scope.$index)"
                  />
                  <Aselect
                    v-else-if="item.select && !formData.disabledArr.includes(scope.$index)"
                    v-model="scope.row[item.prop]"
                    :options="item.options || []"
                    :disabled="formData.disabledArr.includes(scope.$index)"
                  />
                  <el-input-number
                      style="width: 100%"
                    v-else-if="item.number && !formData.disabledArr.includes(scope.$index)"
                    v-model="scope.row[item.prop]"
                    :min="0"
                    :precision="item.precision || 0"
                    :step="item.step || 1"
                    controls-position="right"
                    size="mini"
                    :disabled="formData.disabledArr.includes(scope.$index)"
                  />
                  <el-input
                    v-else-if="!formData.disabledArr.includes(scope.$index)"
                    class="form-table-input"
                    v-model="scope.row[item.prop]"
                    :type="item.textarea ? 'textarea' : 'text'"
                    :readonly="formData.disabledArr.includes(scope.$index)"
                  />
                  <span v-else class="display-only">
                    {{ item.select ? transOptionsToLabel(item.options, scope.row[item.prop]) : scope.row[item.prop] }}
                  </span>
                </el-form-item>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </el-form>
  </div>
</template>

<script>
import Aselect from '@/components/Select/Aselect'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => ({
        tableData: [],
      }),
    },
    tableModel: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Aselect,
  },
  data() {
    return {};
  },
  computed: {
    getTableModel() {
      let newTableModel = this.tableModel.filter((item) => item.show !== false);
      return newTableModel.map((item) => {
        let resObj = {
          ...item,
          align: item.align || 'center',
          // rowHidden: item.rowHidden || undefined, //单元格隐藏
        };
        return resObj;
      });
    },
    formateLabel() {
      return (label) => {
        return label === undefined || label === '' ? '' : label;
      };
    },
  },
  methods: {
    saveItem({ row, $index }) {
      this.$emit('saveItem', { row, $index });
    },
    deleteItem({ row, $index }) {
      this.$emit('deleteItem', { row, $index });
    },
    checkValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            resolve(valid);
          } else {
            reject(valid);
          }
        });
      });
    },
    clearValidate() {
      this.$refs.ruleFormRef.clearValidate();
    },
    transOptionsToLabel(options, value) {
      let res = options.find((item) => item.value === value);
      return res ? res.label : '';
    },
  },
};
</script>
<style lang="scss" scoped>
.form-table {
  margin-top: 20px;
  width: 100%;
  .operation-button-group {
    .operation-button {
      margin-left: 10px;
    }
  }
  .star {
    color: red;
  }
  .display-only {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 32px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
::v-deep {
  .el-form-item {
    margin-bottom: 0;
  }
  .form-table-input {
    .el-input__inner {
      text-align: center;
    }
  }
}
</style>
